在 Day 1，構思了 App 的三大核心功能。有了藍圖，今天的任務就是把它化為實際：和 Gemini 討論出一份具體的規格，再運用 Stitch Designer 產出 UI 初稿！

把想法變成一份份更具體的規劃

使用 Google Gemini 2.5 Flash 來協助，將腦中模糊的構想，變成一份份清晰的規格文件。

首先，向 Gemini 發問：「可以幫我把這一個核心構想，產程一份規格文件嗎？」

Gemini：

AI 自動生成行程
* 功能描述： 這是 App 最主要的核心功能。使用者輸入必要資訊後，App 透過 AI 模型生成一份完整的每日行程規劃。
* 使用者輸入項目：
    * 地點（必填）： 可輸入國家、城市或特定區域。
    * 天數（必填）： 1 至 30 天。
    * 個人偏好標籤（選填）： 用於提供更精準的客製化行程。例如：「文藝」、「美食」、「自然」、「購物」、「親子」、「戶外冒險」等。
* AI 輸出內容：
    * 每日行程規劃： 包含每日的景點、活動建議，並提供預估時間。
    * 詳細景點資訊： 每個景點應包含名稱、簡短介紹、地址、營業時間等基本資訊。
    * 交通建議： 提供從一個景點到下一個景點的建議交通方式與預估時間。

目前測試回應非常精準，不僅整理好格式，還條列出了使用者輸入和 AI 輸出的內容，在這一個步驟也可以依據自己的需求進行微調，更貼合專案的需求。

接下來，繼續向 Gemini 提問：「如果我要開發這一個功能 那我需要哪些頁面？」

Gemini：

AI 自動生成行程：所需頁面架構
這個流程主要包含三個核心頁面：行程輸入頁、生成中頁與行程顯示頁。

1. 行程輸入頁（主動線）
這個頁面是使用者與 AI 互動的起點，目標是讓使用者能直觀且快速地輸入所有必要資訊。
* 頁面標題： 「建立你的專屬行程」或類似吸引人的文案。
* 地點輸入欄： 供使用者輸入國家、城市或區域。應具備模糊搜尋與自動完成功能。
* 天數選擇器： 讓使用者以滑動或下拉方式選擇旅遊天數（1 至 30 天）。
* 偏好標籤區：
    * 顯示方式： 以圖標或文字標籤的形式呈現，讓使用者可以點擊選擇多個標籤。
    * 標籤範例： 「文藝」、「美食」、「自然」、「購物」、「親子」、「戶外冒險」等。
* 「開始生成」按鈕： 位於頁面底部，使用者點擊後開始啟動 AI 生成流程。

2. 生成中頁（等待頁）
當使用者點擊「開始生成」後，系統需要時間處理。這個頁面是用來安撫使用者，並提供視覺化的等待回饋。
<略>

3. 行程顯示頁（結果頁）
這是 AI 最終輸出的結果，也是使用者最關心的頁面。此頁面應以清晰、易讀的方式呈現每日行程。
<略>

在獲得這些輸出結果後，就能根據自己的想法進行細修。像是這個階段，哪些輸入框太過多餘？哪些按鈕可以移除？就這樣，輕鬆獲得了想要的頁面架構！

快速產出 UI 初稿

接著將講調整完的文字輸入到 Stitch Designer 這一個由 Google 開發的免費 AI 輔助工具 ，能根據我的文字描述快速生成 UI 設計稿，大幅縮短了從想法到視覺化的過程！

雖然這些設計還需要後續的微調，但已經提供了極具價值的方向。這對我這個非設計專業的工程師來說，是巨大的幫助。不僅節省了我大量的時間，也讓我能更專注於開發流程～

Stitch Designer 雖然是免費工具但是他是有生成次數限制的（標準模式每月可以生成 350 次內容，實驗模式式每月可以生成 50 次內容），建議可以將它匯出至 Figma 再進行微調省一些次數，要複製到 Figma 也很簡單，可以像圖片那樣操作後右鍵貼上就可以了～但實測目前還是會跑版需要自己進行微調，但我覺得幫助已經很大了！

考量到 AI 的生成速度和成本，我調整了設計，移除了每個行程上的圖片。此外，我重新規劃了按鈕的配置：主要按鈕改為淺藍色底並統一放在右側，輔助按鈕則用白色放置在左側。我也移除了不必要的返回鍵，讓整體的操作流程更順暢～

以下是目前三大核心功能所需要的設計稿：

讚嘆 AI 工具，讓我能快速驗證設計方向。不過，光有 UI 初稿還不夠，下一篇，我將會用 Figma 來打造這款 App 的設計系統，先把所有需要的顏色、字體、按鈕都準備好，讓未來開發更順手！